<template>
  <!-- 商品页 -->
  <div class="content">
    <!-- 检索区 -->
    <el-card class="box-card" shadow="always">
      <el-row>
        <el-col :span="4">
          <div class="search-title">品牌：</div>
        </el-col>
        <el-col :span="20" class="search-key">
          <ul>
            <li>支付宝</li>
            <li>微信</li>
            <li>百度</li>
            <li>快手</li>
            <li>抖音</li>
          </ul>
          <div style="float: right; margin-right: 10px;">
            <el-button round size="mini" icon="el-icon-circle-plus-outline">更多</el-button>
            <el-button round size="mini" icon="el-icon-check">多选</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="search-title">分类：</div>
        </el-col>
        <el-col :span="20" class="search-key">
          <ul v-for="(item) in productType">
            <li @click="productSearch(item)"><a style="cursor:pointer">{{item}}</a></li>
          </ul>
          <div style="float: right; margin-right: 10px;">
            <el-button round size="mini" icon="el-icon-circle-plus-outline">更多</el-button>
            <el-button round size="mini" icon="el-icon-check">多选</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="search-title">价格：</div>
        </el-col>
        <el-col :span="20" class="search-key">
          <ul>
            <li>0~99</li>
            <li>100~199</li>
            <li>200~299</li>
            <li>300~399</li>
            <li>&gt;400</li>
          </ul>
          <div style="float: right; margin-right: 10px;">
            <el-button round size="mini" icon="el-icon-circle-plus-outline">更多</el-button>
            <el-button round size="mini" icon="el-icon-check">多选</el-button>
          </div>
        </el-col>
      </el-row>
      <div style="float: left; margin: 8px 0 8px">
        <el-button type="primary" size="mini" @click="sortProduct('synthesis')">综合
          <i v-bind:class="[sortOrder === 'DESC' ?'el-icon-top' : 'el-icon-bottom']"></i></el-button>
        <el-button type="primary" size="mini" @click="sortProduct('sale')">销量
          <i v-bind:class="[sortOrder === 'DESC' ?'el-icon-top' : 'el-icon-bottom']"></i></el-button>
        <el-button type="primary" size="mini" @click="sortProduct('productPrice')">价格
          <i v-bind:class="[sortOrder === 'DESC' ?'el-icon-top' : 'el-icon-bottom']"></i></el-button>
      </div>
    </el-card>

    <!-- 数据区 -->
    <el-card class="box-card" shadow="always" style="margin-top: 10px" v-if="dataArr.length > 0">
      <el-row>
        <el-col :span="3" v-for="(item) in dataArr" :key="item.id" style="margin: 0 10px 30px 40px">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                 class="image">
            <div>
              <span style="margin-left: -100px">
                <span style="color: #ff0000">￥</span><span style="font-size: 22px; color: #ff0000">{{ item.productPrice }}</span>
              </span>
              <br>
              <span style="font-size: 12px">{{ item.productName }}</span>
              <div class="bottom clearfix">
                <el-button type="text" class="button" icon="el-icon-star-off" @click="collectProduct(item.id)">收藏</el-button>
                <el-button type="text" class="button" icon="el-icon-shopping-cart-2" @click="addCar(item.id)">加车</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px; margin-bottom: 10px"
             :body-style="{background:'#fff', 'line-height':'200px'}" v-if="dataArr.length === 0">
      暂无数据
    </el-card>

    <!-- 分页插件 -->
    <el-card shadow="always" :body-style="{padding:'0px'}">
      <el-pagination style="padding: 10px" background layout="prev, pager, next"
                     :page-size="pageSize" :current-page="currentPage" :total="pageTotal"
                     @current-change="currentChange">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>

  import {get, post} from '@/api/http.js'
  import siblingCall from "@/router/siblingCall";

  export default {
    name: "product",

    // 获取路由传的参数
    props: ['query'],

    // 页面加载就执行（钩子函数）
    mounted() {
      this.queryForm.current = 1;
      this.queryForm.keyword = this.query;

      // 加载查询条件
      this.getSearchCondition();
      // 加载列表数据
      this.getListData();
      // 兄弟组件触发
      siblingCall.$on("TriggerSearch", (TriggerParam) => {
        this.queryForm.current = 1;
        this.queryForm.keyword = TriggerParam;
        this.getListData();

      })
    },

    // 双向数据绑定区域
    data() {
      return {
        // 列表数据集合
        dataArr: [],

        // 列表查询条件
        queryForm: {
          current: 1,
          keyword: '',
          price: '',
          size: 2,
          sortBy: '',
          sortOrder: '',
          type: ''
        },

        // 分页控件的参数
        pageTotal: 0,
        pageSize: 2,
        currentPage: 1,

        // 列表查询条件
        productType: [],

        // 排序方式
        sortOrder: 'DESC',
        orderClass: 'el-icon-bottom',

        // 添加购物车表单参数
        addCartForm:{
          userId:'',
          productId:''
        }

      }
    },

    // 方法区
    methods: {

      // 收藏点击事件
      collectProduct(bizId){
        alert(bizId);
      },

      // 加入购物车
      addCar(bizId){
        let userId = localStorage.getItem('authToken');
        if(userId === null || userId === '' || userId === undefined || userId === 'undefined'){
          this.$router.push("/login");
        }
        this.addCartForm.userId = userId;
        this.addCartForm.productId = bizId;
        post('/retail/product/addCart', this.addCartForm)
          .then(res =>{
            this.$message({
              message:  '添加成功',
              type: 'success'
            });
          })
          .catch(err =>{
            this.$message({
              message:  '添加失败',
              type: 'error'
            });
          })
      },

      // 排序
      sortProduct(val) {
        this.queryForm.sortBy = val;
        if (this.sortOrder === 'DESC') {
          this.queryForm.sortOrder = 'ASC';
          this.sortOrder = 'ASC';
        } else {
          this.queryForm.sortOrder = 'DESC';
          this.sortOrder = 'DESC';
        }
        this.getListData();
      },

      // 检索条件搜索
      productSearch(val) {
        this.queryForm.type = val;
        this.getListData();
      },

      // 分页插件点击事件
      currentChange(val) {
        this.queryForm.current = val;
        this.getListData();
      },

      // 获取查询条件
      getSearchCondition() {
        get('/retail/product/getSearchCondition', '')
          .then(res => {
            this.productType = res.data.productType;
          })
          .catch(err => {
            console.info("===err===");
            console.info(err);
          })
      },

      // 获取列表数据
      getListData() {
        post('/retail/product/list', this.queryForm)
          .then(res => {
            this.dataArr = res.data.records;
            this.pageTotal = res.data.total;
            this.pageSize = res.data.size;
            this.currentPage = res.data.current;
          })
          .catch(err => {
            console.info("===err===");
            console.info(err);
          })
      }
    }
  }
</script>

<style scoped>
  .content {
    margin-top: 8px;
    min-height: 88%;
  }

  .box-card {
    width: 90%;
    margin: auto;
    background-color: #F2F6FC;
  }

  ul {
    display: block;
    padding-inline-start: 0px;
    margin: 0px;
  }

  li {
    float: left;
    display: list-item;
    list-style: none;
    margin: 0 8px;
  }

  .search-title {
    border: 1px solid #DCDFE6;
    background-color: #FFF;
    height: 40px;
    line-height: 40px;
  }

  .search-key {
    border: 1px solid #DCDFE6;
    background-color: #FFF;
    height: 42px;
    line-height: 40px;
  }
</style>
